<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则作业</title>
    <style>
      form {
        width: 400px;
        border: 10px solid pink;
        padding: 20px;
      }

      label {
        display: block;
        height: 80px;
        position: relative;
      }

      input {
        height: 30px;
        font-size: 20px;
        padding-left: 20px;
      }

      label > span {
        position: absolute;
        left: 0;
        top: 35px;
        font-size: 20px;
        color: red;
        display: none;
      }
    </style>
  </head>
  <body>
    <form>
      <label>
        用户名: <input class="username" type="text" />
        <!-- 数字字母开头6～12位 忽略大小写 -->
        <span>请按照规则填写用户名</span>
      </label>
      <label>
        密码: <input class="password" type="text" />
        <!-- 数字字母下划线 6～12位 -->
        <span>请按照规则填写密码</span>
      </label>
      <label>
        手机号: <input class="phone" type="text" />
        <!-- 11位数字即可 -->
        <span>请按照规则填写手机号</span>
      </label>
      <label>
        <!-- 6～12位 开头为数字大小写字母 中间为数字字母下划线均可-->
        <!-- @ 只接收qq 163 sina -->
        <!-- com或者cn -->
        邮箱: <input class="email" type="text" />
        <span>请按照规则填写邮箱</span>
      </label>
      <input type="button" value="完善资料" />
    </form>

    <script>
      let userNameReg = /^[0-9a-z]\S{5,11}$/i;
      let passwordReg = /\w{6,12}/;
      let phoneReg = /^\d{11}$/;
      let emailReg = /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/;

      let spans = document.querySelectorAll("span");
      let ipts = document.querySelectorAll("input");

      ipts.forEach(function(ipt, index){
        ipt.oninput = function (e) {
          let str = ipt.value;
          index === 0 && !userNameReg.test(str) ? spans[0].style.display = "block" : spans[0].style.display = "none";
          index === 1 && !passwordReg.test(str) ? spans[1].style.display = "block" : spans[1].style.display = "none";
          index === 2 && !phoneReg.test(str) ? spans[2].style.display = "block" : spans[2].style.display = "none";
          index === 3 && !emailReg.test(str) ? spans[3].style.display = "block" : spans[3].style.display = "none";
        }
      });
      
      /* for(let i = 0; i < ipts.length; i++){
        ipts[i].oninput = function (e) {
          let str = ipts[i].value;
          // console.log(phoneReg.test(str));
          i === 0 && !userNameReg.test(str) ? spans[0].style.display = "block" : spans[0].style.display = "none";
          i === 1 && !passwordReg.test(str) ? spans[1].style.display = "block" : spans[1].style.display = "none";
          i === 2 && !phoneReg.test(str) ? spans[2].style.display = "block" : spans[2].style.display = "none";
          i === 3 && !emailReg.test(str) ? spans[3].style.display = "block" : spans[3].style.display = "none";
          
        }
      } */
    </script>
  </body>
</html>
